//运费配置
<template>
  <div>
    <a-row>
      <a-col
        :span="5"
        style="border-right: 1px solid #ccc"
        :style="{ overflow: 'auto', height: windowHeight + 'px' }"
      >
        <div style="padding: 0">
          <a-tree
            style="font-size: 18px"
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :tree-data="treeData"
            @expand="onExpand"
          >
            <template slot="title" slot-scope="item" style="width: 100%">
              <p @click.stop="rowTabData(item)" class="treeRow">
                <span> {{ item.title }} </span>
                <span @click.stop="changeNo" class="handle">
                  <a-switch
                    v-if="item.hierarchy == '1'"
                    :checked="item.isDisable == '0'"
                    @change="checked => changeSerIsDisable(checked, item)"
                  />
                  <a-icon
                    v-if="item.hierarchy == '0'"
                    class="treeIconBtn"
                    @click.stop="addTreeModal(item)"
                    type="plus"
                  />
                </span>
              </p>
            </template>
          </a-tree>
        </div>
      </a-col>
      <a-col :span="19" style="border-left: 1px solid #ccc">
        <a-spin tip="Loading..." :spinning="spinning">
          <div style="margin:10px 0;">
            <span>国内运费方案：</span>
            <a-button
              @click="addInternal"
              style="margin-left:20px;"
              type="primary"
              >添加国内运费方案</a-button
            >
          </div>
          <a-table
            :data-source="internalData"
            :scroll="{ x: true, y: 250 }"
            style="margin-bottom:20px;"
            :pagination="false"
          >
            <a-table-column
              key="weight"
              data-index="weight"
              align="center"
              width="25%"
            >
              <span slot="title">重量（g）</span>
              <template slot-scope="text, record">
                <span v-if="record.sysServiceItemFreightSchemeRuleId">
                  {{ record.weight }}
                </span>
                <div style="display:flex;" v-else>
                  <a-input-number
                    placeholder="重量"
                    :min="0"
                    style="width:50%"
                    v-model="record.weight"
                    :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
                    :precision="2"
                  />
                  <a-select
                    :disabled="true"
                    style="width:40%;margin-left:20px;"
                    show-search
                    option-filter-prop="children"
                    v-model="record.unit"
                    allowClear
                    placeholder="单位"
                  >
                    <a-select-option
                      :value="item.value"
                      v-for="item in convers"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </div>
              </template>
            </a-table-column>
            <a-table-column
              key="transform"
              data-index="transform"
              align="center"
              width="10%"
            >
              <span slot="title">转换单位（LB） </span>
              <template slot-scope="text, record">
                {{ record.transform }}
              </template>
            </a-table-column>
            <a-table-column
              key="scheme"
              data-index="scheme"
              align="center"
              width="40%"
            >
              <span slot="title">运费方案</span>
              <template slot-scope="text, record">
                <div style="display:flex;">
                  <div style="display:flex;align-items:center;">
                    <a-checkbox
                      v-if="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      :checked="
                        record.fixedCost != '' &&
                          record.fixedCost != null &&
                          (record.freightScale == '' ||
                            record.freightScale == null)
                      "
                      :disabled="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      style="width:200px;text-align: right;"
                    >
                      固定费用：
                    </a-checkbox>
                    <a-checkbox
                      v-else
                      :checked="record.isFixed"
                      :disabled="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      style="width:200px;text-align: right;"
                      @change="e => onChangeFixed(e, record, 'add')"
                    >
                      固定费用：
                    </a-checkbox>
                    <span v-if="record.sysServiceItemFreightSchemeRuleId">
                      {{ record.fixedCost }}
                    </span>
                    <a-input-number
                      v-else
                      placeholder="固定费用"
                      style="width:100%"
                      :disabled="!record.isFixed"
                      v-model="record.fixedCost"
                      :min="0"
                      :formatter="
                        value =>
                          `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                      "
                      :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
                      :precision="2"
                    />
                  </div>
                  <div
                    style="margin-left:10px;display:flex;align-items:center;"
                  >
                    <a-checkbox
                      v-if="record.sysServiceItemFreightSchemeRuleId"
                      :checked="
                        record.freightScale != '' &&
                          record.freightScale != null &&
                          (record.fixedCost == '' || record.fixedCost == null)
                      "
                      :disabled="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      style="width:210px;text-align: right;"
                    >
                      运费百分比：
                    </a-checkbox>
                    <a-checkbox
                      v-else
                      :checked="record.freight"
                      style="width:210px;text-align: right;"
                      @change="e => onChangeFreight(e, record, 'add')"
                    >
                      运费百分比：
                    </a-checkbox>
                    <span v-if="record.sysServiceItemFreightSchemeRuleId">
                      {{ record.freightScale }}
                    </span>
                    <a-input-number
                      v-else
                      placeholder="运费百分比"
                      style="width:100%"
                      :min="0"
                      :disabled="!record.freight"
                      v-model="record.freightScale"
                      :formatter="value => `${value}%`"
                      :parser="value => value.replace('%', '')"
                    />
                  </div>
                </div>
              </template>
            </a-table-column>
            <a-table-column
              key="action"
              data-index="action"
              align="center"
              width="10%"
            >
              <span slot="title">操作</span>
              <template slot-scope="text, record">
                <a-popconfirm
                  title="是否要删除?"
                  ok-text="是"
                  cancel-text="取消"
                  @confirm="e => onDelete(e, 'guonei', record)"
                >
                  <a
                    href="javascript:;"
                    style="color:#f00;border-bottom:1px solid #f00;"
                    >删除</a
                  >
                </a-popconfirm>
              </template>
            </a-table-column>
          </a-table>
          <div style="margin:10px 0;">
            <span>国际运费方案：</span>
            <a-button
              @click="addInternational"
              style="margin-left:20px;"
              type="primary"
              >添加国际运费方案</a-button
            >
          </div>
          <a-table
            :data-source="internationalData"
            :scroll="{ x: true, y: 250 }"
            style="margin-bottom:20px;"
            :pagination="false"
          >
            <a-table-column
              key="weight"
              data-index="weight"
              align="center"
              width="25%"
            >
              <span slot="title">重量（g）</span>
              <template slot-scope="text, record">
                <span v-if="record.sysServiceItemFreightSchemeRuleId">
                  {{ record.weight }}
                </span>
                <div style="display:flex;justify-content:center;" v-else>
                  <a-input-number
                    placeholder="重量"
                    :min="0"
                    style="width:50%"
                    v-model="record.weight"
                    :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
                    :precision="2"
                  />
                  <!-- <a-select
                    style="width:40%;margin-left:20px;"
                    show-search
                    option-filter-prop="children"
                    v-model="record.unit"
                    allowClear
                    placeholder="单位"
                  >
                    <a-select-option
                      :value="item.value"
                      v-for="item in convers"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select> -->
                </div>
              </template>
            </a-table-column>
            <a-table-column
              key="transform"
              data-index="transform"
              align="center"
              width="10%"
            >
              <span slot="title">转换单位（LB） </span>
              <template slot-scope="text, record">
                {{ record.transform }}
              </template>
            </a-table-column>
            <a-table-column
              key="scheme"
              data-index="scheme"
              align="center"
              width="40%"
            >
              <span slot="title">运费方案</span>
              <template slot-scope="text, record">
                <div style="display:flex;">
                  <div style="display:flex;align-items:center;">
                    <a-checkbox
                      v-if="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      :checked="
                        record.fixedCost != '' &&
                          record.fixedCost != null &&
                          (record.freightScale == '' ||
                            record.freightScale == null)
                      "
                      :disabled="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      style="width:200px;text-align: right;"
                    >
                      固定费用：
                    </a-checkbox>
                    <a-checkbox
                      v-else
                      :checked="record.isFixed"
                      :disabled="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      style="width:200px;text-align: right;"
                      @change="e => onChangeFixed(e, record, 'add')"
                    >
                      固定费用：
                    </a-checkbox>
                    <span v-if="record.sysServiceItemFreightSchemeRuleId">
                      {{ record.fixedCost }}
                    </span>
                    <a-input-number
                      v-else
                      placeholder="固定费用"
                      style="width:100%"
                      :disabled="!record.isFixed"
                      v-model="record.fixedCost"
                      :min="0"
                      :formatter="
                        value =>
                          `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                      "
                      :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
                      :precision="2"
                    />
                  </div>
                  <div
                    style="margin-left:10px;display:flex;align-items:center;"
                  >
                    <a-checkbox
                      v-if="record.sysServiceItemFreightSchemeRuleId"
                      :checked="
                        record.freightScale != '' &&
                          record.freightScale != null &&
                          (record.fixedCost == '' || record.fixedCost == null)
                      "
                      :disabled="
                        record.sysServiceItemFreightSchemeRuleId ? true : false
                      "
                      style="width:210px;text-align: right;"
                    >
                      运费百分比：
                    </a-checkbox>
                    <a-checkbox
                      v-else
                      :checked="record.freight"
                      style="width:210px;text-align: right;"
                      @change="e => onChangeFreight(e, record, 'add')"
                    >
                      运费百分比：
                    </a-checkbox>
                    <span v-if="record.sysServiceItemFreightSchemeRuleId">
                      {{ record.freightScale }}
                    </span>
                    <a-input-number
                      v-else
                      placeholder="运费百分比"
                      style="width:100%"
                      :min="0"
                      :disabled="!record.freight"
                      v-model="record.freightScale"
                      :formatter="value => `${value}%`"
                      :parser="value => value.replace('%', '')"
                    />
                  </div>
                </div>
              </template>
            </a-table-column>
            <a-table-column
              key="action"
              data-index="action"
              align="center"
              width="10%"
            >
              <span slot="title">操作</span>
              <template slot-scope="text, record">
                <a-popconfirm
                  title="是否要删除?"
                  ok-text="是"
                  cancel-text="取消"
                  @confirm="e => onDelete(e, 'guoji', record)"
                >
                  <a
                    href="javascript:;"
                    style="color:#f00;border-bottom:1px solid #f00;"
                    >删除</a
                  >
                </a-popconfirm>
              </template>
            </a-table-column>
          </a-table>
          <div style="display:flex;justify-content: center;">
            <a-button
              type="primary"
              :disabled="isADD"
              @click="saveSchemeData"
              style="width:200px;"
              >确定</a-button
            >
          </div>
        </a-spin>
      </a-col>
      <a-modal v-model="lpViseble" :title="lpTil" width="20%">
        <template slot="footer" class="modelBtn">
          <a-button
            @click="cancelAddser"
            style="background: #d7d7d7; color: #fff; border: none"
            >取消</a-button
          >
          <a-button :loading="loading" type="primary" @click="addScheme"
            >确认</a-button
          >
        </template>
        <a-form-model
          style="padding:0 5%"
          ref="schemeForm"
          class="schemeform"
          :model="schemeFormData"
          :rules="schemeRule"
        >
          <a-form-model-item prop="schemeName" label="方案名称">
            <a-input v-model="schemeFormData.schemeName" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-row>
  </div>
</template>

<script>
import {
  freight_logiTree,
  freight_addScheme,
  freight_searchTabList,
  freight_schemeSureAdd,
  freight_deleteItem,
  freight_editItem
} from "@/apis/system/setManage/setRules";
export default {
  data() {
    return {
      isADD: true,
      convers: [
        { value: "0", label: "LB" },
        { value: "1", label: "g" }
      ],
      schemeRule: {
        schemeName: [
          { required: true, message: "请填写方案名称！", trigger: "blur" }
        ]
      },
      //新增方案数据
      schemeFormData: {
        schemeName: null,
        sysLogisticsServiceItemId: null
      },
      //国内表格数据
      internalData: [],
      //国际表格数据
      internationalData: [],
      autoExpandParent: false,
      windowHeight: document.body.clientHeight, //实时屏幕高度,
      spinning: false,
      tableId: null,
      handleFlag: "add",
      lpTil: "新建方案",
      lpViseble: false,
      loading: false,
      //总条数
      total: 5,
      // 搜索数据
      searchData: {
        current: 1,
        size: 10
      },
      //选中打开的树
      expandedKeys: [],
      treeData: [],
      sort: 0,
      nowId: null,
      parentId: null
    };
  },
  created() {
    this.getSysTeamTree();
  },
  methods: {
    //是否禁用树的二级
    async changeSerIsDisable(e, row) {
      if (e) {
        let res = await freight_editItem(row.id, 0);
        if (res.code == "10000") {
          row.isDisable = 0;
          this.getSysTeamTree();
        }
      } else {
        let res = await freight_editItem(row.id, 1);
        if (res.code == "10000") {
          row.isDisable = 1;
          this.getSysTeamTree();
        }
      }
    },
    //改变固定
    onChangeFixed(e, record) {
      if (e.target.checked) {
        record.isFixed = true;
        record.freightScale = null;
        record.freight = false;
      } else {
        record.isFixed = false;
        record.fixedCost = null;
      }
    },
    //改变运费百分比
    onChangeFreight(e, record) {
      if (e.target.checked) {
        record.freight = true;
        record.fixedCost = null;
        record.isFixed = false;
      } else {
        record.freight = false;
        record.freightScale = null;
      }
    },
    //保存
    async saveSchemeData() {
      let subArr = this.internalData.concat(this.internationalData);
      let res = await freight_schemeSureAdd(this.parentId, this.nowId, subArr);
      if (res.code == "10000") {
        this.getSysTeamTree();
        this.getTabData();
        this.isADD = true;
      }
    },
    //删除运费方案
    onDelete(e, flag, record) {
      if (flag == "guonei") {
        this.internalData.forEach(async (item, index) => {
          if (item.sysServiceItemFreightSchemeRuleId) {
            if (
              item.sysServiceItemFreightSchemeRuleId ==
              record.sysServiceItemFreightSchemeRuleId
            ) {
              let res = await freight_deleteItem(
                this.parentId,
                this.nowId,
                item.sysServiceItemFreightSchemeRuleId
              );
              if (res.code == "10000") {
                this.getTableList();
                this.getTabData();
                this.isDsble();
              }
            }
          } else {
            if (item.key == record.key) {
              this.internalData.splice(index, 1);
              this.isDsble();
            }
          }
        });
      }
      if (flag == "guoji") {
        this.internationalData.forEach(async (item, index) => {
          if (item.sysServiceItemFreightSchemeRuleId) {
            if (
              item.sysServiceItemFreightSchemeRuleId ==
              record.sysServiceItemFreightSchemeRuleId
            ) {
              let res = await freight_deleteItem(
                this.parentId,
                this.nowId,
                item.sysServiceItemFreightSchemeRuleId
              );
              if (res.code == "10000") {
                this.getTableList();
                this.getTabData();
                this.isDsble();
              }
            }
          } else {
            if (item.key == record.key) {
              this.internationalData.splice(index, 1);
              this.isDsble();
            }
          }
        });
      }
    },
    //封装一个是否禁用按钮
    isDsble() {
      let newArr = [];
      let newArr2 = [];
      newArr = this.internalData.filter(item => {
        return !item.sysServiceItemFreightSchemeRuleId;
      });

      newArr2 = this.internationalData.filter(item => {
        return !item.sysServiceItemFreightSchemeRuleId;
      });
      if (newArr.length <= 0 && newArr2.length <= 0) {
        this.isADD = true;
      } else {
        this.isADD = false;
      }
    },
    //添加国内运费方案
    addInternal() {
      if (
        this.parentId != null &&
        this.parentId != "" &&
        this.nowId != null &&
        this.nowId != ""
      ) {
        this.isADD = false;
        this.internalData.push({
          weight: null,
          unit: "1",
          key: this.internalData.length + 1,
          transformUnit: null,
          isCountry: 0,
          freight: false,
          isFixed: false,
          fixedCost: null,
          freightScale: null
        });
      } else {
        this.$message.error("请先选择左边的方案！");
        return false;
      }
    },
    //添加国际运费方案
    addInternational() {
      if (
        this.parentId != null &&
        this.parentId != "" &&
        this.nowId != null &&
        this.nowId != ""
      ) {
        this.isADD = false;
        this.internationalData.push({
          weight: null,
          unit: "1",
          transformUnit: null,
          key: this.internationalData.length + 1,
          isCountry: 1,
          freight: false,
          isFixed: false,
          fixedCost: null,
          freightScale: null
        });
      } else {
        this.$message.error("请先选择左边的方案！");
        return false;
      }
    },
    //新增方案方法
    addScheme() {
      this.loading = true;
      this.$refs.schemeForm.validate(async valid => {
        if (valid) {
          let res = await freight_addScheme(this.schemeFormData);
          if (res.code == "10000") {
            this.loading = false;
            this.getSysTeamTree();

            this.cancelAddser();
          }
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    // 阻止冒泡
    changeNo() {},
    //关闭添加物流商模态框
    cancelAddser() {
      this.loading = false;
      this.schemeFormData = {};
      this.lpViseble = false;
    },
    //点击分类
    async rowTabData(row) {
      if (row.hierarchy == "0") {
        return false;
      } else {
        this.isADD = true;
        this.nowId = row.id;
        this.parentId = row.parentId;
        this.getTabData();
      }
    },
    //获取右边表格数据
    async getTabData() {
      let res = await freight_searchTabList(this.parentId, this.nowId);
      if (res.code == "200") {
        this.internalData = res.responseBody.filter(item => {
          return item.isCountry == "0";
        });
        this.internationalData = res.responseBody.filter(item => {
          return item.isCountry == "1";
        });
      }
    },
    //点击物流商上的新增方案
    addTreeModal(item) {
      this.schemeFormData.sysLogisticsServiceItemId = item.id;
      this.lpViseble = true;
    },
    // 树形打开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //获取物流平台树
    async getSysTeamTree() {
      let { code, responseBody } = await freight_logiTree();
      if (code === "200") {
        this.treeData = this.resetTree(responseBody);
      }
    },
    //重构树
    resetTree(data) {
      data.forEach(item => {
        item.label = item.title;
        item.key = item.id;
        item.sort = this.sort;
        item.scopedSlots = { title: "title" };
        if (item.children && item.children.length >= 1) {
          this.sort += 1;
          this.resetTree(item.children);
        }
      });
      this.sort = 0;
      return data;
    },
    //重构级联树
    resetBranchTree(data) {
      data.forEach(item => {
        item.label = item.teamName;
        item.value = item.id;
        item.sort = this.sort;
        item.scopedSlots = { title: "title" };
        if (item.children && item.children.length >= 1) {
          this.resetBranchTree(item.children);
        }
      });
      return data;
    },
    //根据左边物流平台来获取表格数据
    async getTableList() {}
  }
};
</script>

<style lang="less" scoped>
/deep/.serviceform {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .ant-form-item {
    display: flex;
  }
}
/deep/.plat-form {
  margin-top: 20px;
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-left: 5%;
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      width: 120px !important;
    }
    .ant-form-item-control-wrapper {
      width: 50%;
    }
  }
  .oftime {
    .ant-form-item-control-wrapper {
      width: 100%;
    }
  }
}
/deep/.ant-tree {
  li {
    .ant-tree-node-content-wrapper {
      padding-right: 15px;
      width: 90%;
      height: 29px;
      padding-bottom: 3px;
      .treeRow {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .handle {
          .anticon-plus {
            margin: 0 10px;
          }
        }
      }
    }
  }
}
/deep/.ant-modal-body {
  padding: 0;
}
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
/deep/.schemeform {
  width: 100%;
  margin-top: 20px;
  padding: 5%;
  display: flex;
  justify-content: center;
  .ant-form-item {
    display: flex;
  }
}
</style>
